<template>
	<view class="hiYu">
		<view class="top"></view>
	    <view class="title">
			<i class='iconfont iconzuojiantou'></i>
			<text>嗨遇</text>
			<text @tap="goGifPage">保存</text>
		</view>
		 <!-- 内容 -->
		 <view class="content">
			<view class="tit">上传完基本信息才可使用嗨遇功能呦！</view>	
			<view class="demo">
				<view class="left" @tap="uploadImg">
					<i class="iconfont iconjiahao"></i>
					<i class='iconfont icontupian' v-if="showImg"></i>
					<image :src="imgPic" v-else></image>
				</view>
				<view class="right">
					<view class="case">实例:</view>
					<view class="imgGrop">
						<view class="top">
							<image src="../../static/4.jpg"></image>
							<image src="../../static/3.jpg"></image><strong></strong>
						</view>
						<view >
							<i class="iconfont iconicon_duihao-mian"></i>
							<i class="iconfont iconguanbi"></i>
						</view>
						<view class="bottom">
							 上传证实照片成更大几率找到喜欢的人哦！
						</view>
					</view>
				</view>
			</view>
		 </view>
		 <!-- 资料 -->
		 <view class="data">
			 <view class="first">
				 <view class="fir_one">个性签名：</view>
				 <view class="fir_two">
					 <input type="text" placeholder="填写您的个性签名..." v-model="signName" placeholder-class="plac_color">
				 </view>
			 </view>
			 <view class="second" @tap="showPopup">
				 <view class="sec_one age">
					 性别:
				 </view>
				 <view class="sec_two">
					 <text>{{sex}}</text>
					 <i class='iconfont iconiconfontjiantou2'></i>
				 </view>
			 </view>
			<view class="second " @tap='showPopups'>
				 <view class="sec_one age">
					 年龄:
				 </view>
				 <view class="sec_two">
					 <text>{{ageNum}}</text>
					 <i class='iconfont iconiconfontjiantou2'></i>
				 </view>
			</view>
		 </view>
		<!-- 弹出层 -->
		<view class="showModel">
			<van-popup :show="show" position="bottom" custom-style="height:15%" @click-overlay="onClose()">
					<view class="animate">
						<view @tap="secletMan('男')">男</view>
						<view @tap="secletMan('女')">女</view>
					</view>
			 </van-popup>
			 <van-popup :show="shows" position="bottom" custom-style="height:30%" @click-overlay="onClose()">
			 		<view class="animate">
			 			<view v-for="(item,index) in sexArr" :key='index' @tap="secletAge(item)">{{item}}</view>
			 		</view>
			  </van-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				show:false,
				sex:'男',
				shows:false,
				sexArr:[],
				ageNum:18,
				showImg:true,
				imgPic:'',
				signName:''
			}
		},
		onLoad(){
			for(var i=18;i<61;i++){
			  this.sexArr.push(i);
			}	
		},
		methods: {
			goGifPage (){
				uni.navigateTo({
					url:'/pages/gifPage/gifPage'
				})
			},
			showPopup() {
			   this.show=true;
			  },
			  onClose() {
				this.show=false;
				this.shows=false;
			  },
			 secletMan (val){
				this.sex=val ;
				this.show=false;
			 },
			 showPopups (){
				 this.shows=true;
			 },
			 secletAge(val){
				this.ageNum =val;
				 this.shows=false;
			 },
			 //上传图片
			 uploadImg (){
				 var that=this;
				 uni.chooseImage({
				     count: 1, //默认9
				     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				     sourceType: ['album','camera'], //从相册选择
				     success: function (res) {
						 that.showImg=false;
						 that.imgPic=res.tempFilePaths[0];
						 
				     }
				 });
			 }
			
		}
	}
</script>

<style lang="less" scoped>
	.hiYu{
		width: 100%;
		background-color: #F2F2F2;
		height: 100%;
		.top{
			width: 100%;
			height: 40rpx;
			background-color: #fff;
			}
        .title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			background-color: #fff;
			padding: 0 20rpx;
			box-sizing: border-box;
			text{
				&:nth-child(2){
					color:#333333;
					font-size: 30rpx;
					font-weight: bold;
				}
				&:nth-child(3){
					width:100rpx;
					height:44rpx;
					background:rgba(102,110,236,1);
					border-radius:22rpx;
					font-size: 24rpx;
					color:#fff;
					text-align: center;
					line-height: 44rpx;
					margin-top:20rpx;
				}
			}
			
		}
	   .content{
		    width: 100%;
			padding:30rpx 10rpx;
			box-sizing: border-box;
			.tit{
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				margin-bottom: 35rpx;
			}
			.demo{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				.left{
					width: 245rpx;
					height: 350rpx;
					border-radius: 15rpx;
					background-color: #dddddd;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-shrink: 0;
					.iconjiahao{
						position: absolute;
						top:-20rpx;
						right:20rpx;
						font-size: 36rpx;
						color:#1297FB;
						z-index: 2;
					}
					.icontupian{
						font-size: 70rpx;
						color:#eeeeee;
					}
					image{
						width: 100%;
						height: 100%;
						border-radius:15rpx ;
					}
				}
				.right{
					display: flex;
					flex-shrink: 0;
					margin-left: 40rpx;
					position: relative;
					.case{
						font-size:24rpx;
						font-family:PingFang SC;
						font-weight:500;
						color:rgba(51,51,51,1);
						margin-right: 10rpx;
						
					}
					.imgGrop{
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						.top{
							height: 264rpx;
							image{
								width: 182rpx;
								height: 264rpx;
								border-radius: 15rpx;
								&:nth-child(1){
									margin-right: 10rpx;
								}
							}
							
							
						}
						.iconicon_duihao-mian{
							position: absolute;
							top:-10rpx;
							left: 195rpx;
							color:#34d259;
							font-size: 30rpx;
						}
						.iconguanbi{
							position: absolute;
							top:-10rpx;
							right: 20rpx;
							color:#fc6262;
						}
						.bottom{
							font-size:24rpx;
							font-family:PingFang SC;
							font-weight:500;
							color:rgba(51,51,51,1);
							width: 330rpx;
							margin-top:25rpx;
						}
					}
				}
				
			}
	   }
	   .data{
		   background-color: #fff;
		   padding: 10rpx;
		   box-sizing: border-box;
		   .first{
			   font-size:28rpx;
			   font-family:PingFang SC;
			   font-weight:500;
			   color:rgba(51,51,51,1);
			   display: flex;
			   justify-content: space-between;
			   height: 88rpx;
			   line-height: 88rpx;
			   border-bottom: 1px solid #eee;
			   .fir_one{
				   flex-shrink: 0;
			   }
			 .fir_two{
				 width: 100%;
				 input{
					 width: 100%;
					 height: 100%;
				 }
				 .plac_color{
					 font-size:28rpx;
					 font-family:PingFang SC;
					 font-weight:500;
					 color:rgba(153,153,153,1);
				 }
			 }  
		   }
		   .second{
			   display: flex;
			   justify-content: flex-start;
			   align-items: center;
			   height: 88rpx;
			   border-bottom:1px solid #eee ;
			   .sec_one{
				   font-size:28rpx;
				   font-family:PingFang SC;
				   font-weight:500;
				   color:rgba(51,51,51,1);
				   flex-shrink: 0;
			   }
			   .sec_two{
				   display: flex;
				   justify-content: space-between;
				   align-items: center;
				   width: 100%;
				   text{
					   font-size:28rpx;
					   font-family:PingFang SC;
					   font-weight:500;
					   color:rgba(153,153,153,1);
					   margin-left:30rpx;
				   }
			   }
		   }
		   .age{
			   width: 110rpx;
		   }
	   }
	   .showModel{
		   width: 100%;
		   .animate{
				font-size: 36rpx;
				color: #666;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				view{
					padding: 20rpx 0;
					box-sizing: border-box;
					
				}
				
		   }
	   }
	}
</style>
